<!DOCTYPE html>
<html>
<head>
    <title>Temperature vs. Time Graph</title>
</head>
<body>
<canvas id="physicsCanvas" width="520" height="420"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Define coordinate transformation and constants
    // These values are chosen to best match the layout of the original image.
    const originX = 60;
    const originY = 360;
    const graphHeight = 320;
    const graphWidth = 400;
    const xMax = 20;
    const yMax = 80;

    // Functions to convert data coordinates to canvas coordinates
    function cx(t) {
        return originX + (t / xMax) * graphWidth;
    }

    function cy(T) {
        return originY - (T / yMax) * graphHeight;
    }

    // --- Draw Grid ---
    ctx.beginPath();
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 1;
    ctx.setLineDash([5, 5]);

    // Horizontal grid lines from y-ticks
    for (let T = 20; T <= yMax; T += 20) {
        ctx.moveTo(cx(0), cy(T));
        ctx.lineTo(cx(xMax), cy(T));
    }

    // Vertical grid lines from x-ticks
    for (let t = 5; t <= xMax; t += 5) {
        ctx.moveTo(cx(t), cy(0));
        ctx.lineTo(cx(t), cy(yMax));
    }
    ctx.stroke();
    ctx.setLineDash([]); // Reset line style to solid

    // --- Draw Axes ---
    ctx.beginPath();
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;

    // Y-axis
    ctx.moveTo(cx(0), originY);
    ctx.lineTo(cx(0), originY - graphHeight - 10);
    // Y-axis Arrow
    ctx.moveTo(cx(0), originY - graphHeight - 20);
    ctx.lineTo(cx(0) - 5, originY - graphHeight - 10);
    ctx.lineTo(cx(0) + 5, originY - graphHeight - 10);
    ctx.closePath();
    ctx.fill();

    // X-axis
    ctx.beginPath();
    ctx.moveTo(originX, cy(0));
    ctx.lineTo(originX + graphWidth + 10, cy(0));
    // X-axis Arrow
    ctx.moveTo(originX + graphWidth + 20, cy(0));
    ctx.lineTo(originX + graphWidth + 10, cy(0) - 5);
    ctx.lineTo(originX + graphWidth + 10, cy(0) + 5);
    ctx.closePath();
    ctx.fill();


    // --- Draw Ticks and Labels ---
    ctx.font = '18px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = 'black';

    // Y-axis labels
    ctx.textAlign = 'right';
    for (let T = 20; T <= yMax; T += 20) {
        ctx.fillText(T, cx(0) - 8, cy(T));
    }

    // X-axis labels
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    for (let t = 5; t <= xMax; t += 5) {
        ctx.fillText(t, cx(t), cy(0) + 8);
    }
    
    // Origin label
    ctx.fillText('0', cx(0) - 10, cy(0) + 5);

    // Axis titles
    ctx.font = 'italic 20px Times New Roman';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'bottom';
    ctx.fillText('T/°C', cx(0) + 5, cy(yMax) - 15);
    
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillText('t/min', cx(xMax) + 10, cy(0) + 20);
    
    // --- Draw Data Lines ---
    ctx.beginPath();
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2.5;
    
    // Line 甲 (Jia)
    // From the graph, T=60 at t=10, so the slope is T/t = 60/10 = 6 °C/min.
    // The line ends at T=80. The corresponding time is t = T/slope = 80/6 = 40/3 ≈ 13.33 min.
    const t_jia_end = 40 / 3;
    ctx.moveTo(cx(0), cy(0));
    ctx.lineTo(cx(t_jia_end), cy(80));
    ctx.stroke();

    // Line 水 (Water)
    // From the graph, the line ends at the point (t=20, T=60).
    ctx.beginPath();
    ctx.moveTo(cx(0), cy(0));
    ctx.lineTo(cx(20), cy(60));
    ctx.stroke();

    // --- Draw Text on Graph ---
    ctx.font = '24px KaiTi';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    
    // Label 甲 (Jia)
    ctx.textBaseline = 'bottom';
    ctx.fillText('甲', cx(11.5), cy(80));

    // Label 水 (Shui)
    ctx.textBaseline = 'middle';
    ctx.fillText('水', cx(19), cy(60) + 5);

</script>
</body>
</html>